<template>
  <vxe-modal
    :title="'博客名称'" @show="scrollToTop"
    v-model="dialogVisible" height="95vh" @closed="handleClosed"
    width="60%" showFooter esc-closable show-zoom resize>

    <!-- 文章头部信息 -->
    <div class="blog-header">
      <div class="meta-info">
        <span>
                <i class="el-icon-user"/>
                {{ blog.nickName }}
              </span>
        <span>
                <i class="el-icon-time"/>
                {{ blog.createTime }}
              </span>
        <span>
                <i class="el-icon-collection-tage"/>
                {{ blog.category }}
              </span>
        <span>
                <i class="el-icon-view"/>
                {{ blog.views }} 阅读
              </span>
      </div>
    </div>
    <!-- 摘要 -->
    <div v-if="blog.summary" class="blog-summary">
      <el-alert
        :title="blog.summary"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
    </div>

    <!-- 文章内容 -->
    <div class="blog-content">
      <div class="ql-container ql-snow" style="border: 1px solid #fff">
        <div class="ql-editor" style="font-size: 16px">
          <div v-html="blog.content"/>
        </div>
      </div>
    </div>

    <!-- 文章点赞和收藏 -->
    <div class="blog-footer">
      <div class="actions">
        <!-- 点赞 -->
        <el-button
          type="primary"
          :icon="isLiked ? 'el-icon-thumb' : 'el-icon-thumb'"
          size="small"
          @click="handleLike"
          :loading="loading"
          :class=" {'liked': isLiked} "
        >
          {{ isLiked ? '已赞' : '点赞' }}
        </el-button>
        <!-- 收藏 -->
        <el-button
          :type="isCollected ? 'warning' : 'info'"
          :icon="isCollected ? 'el-icon-star-on' : 'el-icon-star-off'"
          size="small"
          @click="handleCollect"
          :loading="loading"
          :class=" {'liked': isLiked} "
        >
          {{ isCollected ? '已收藏' : '收藏' }}
        </el-button>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="comment-section" v-if="comments.length > 0">
      <h3 class="comment-title">
        <i class="el-icon-chat-dot-square"/> 评论 ({{ comments.length }})
      </h3>
      <div class="comment-list">
        <div class="comment-item" v-for="comment in comments" :key="comment.commentId">
          <div class="comment-avatar">
            <img :src="comment.avatar" :alt="comment.title">
          </div>
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-nickName">{{ comment.nickName }}</span>
              <span class="comment-time">{{ comment.createTime }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-actions">
              <span @click="handleComment(comment.commentId)">
                <i class="el-icon-chat-dot-round"></i> 回复
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发表评论 -->
    <div class="comment-form">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="写下你的评论..."
        v-model="content"
      ></el-input>
      <div class="form-actions">
        <el-button
          type="primary"
          size="small"
          @click="subComment"
          :loading="loading"
        >
          发表评论
        </el-button>
      </div>
    </div>


  </vxe-modal>
</template>

<script>
import {getBlog, selectBlogLikeByUserIdAndBlogId, selectCollectByUserIdAndBlogId, updateBlog} from "@/api/lundao/blog";
import {addBloglike, deleteBlogLikeByBlogIdAndUserId} from "@/api/lundao/bloglike";
import {addCollect, deleteCollectByUserIdAndBlogId} from "@/api/lundao/collect";
import {addComment, selectCommentByBlogId} from "@/api/lundao/comment";

export default {
  name: "blogDetail",//博客详情组件
  data() {
    return {
      dialogVisible: false,//判断弹窗是否打开
      blogId: null, //博客ID
      blog: {}, //博客详细信息
      isLiked: false, //点赞状态(true = 点过赞, false = 没有点过赞)
      isCollected: false, //收藏状态(true = 收藏过, false = 没有收藏)
      loading: false, //加载状态
      comments: [], //该博客的评论列表
      content: '', //评论的内容
    }
  },
  methods: {
    scrollToTop() {
      this.$nextTick(() => {
        const modalContent = this.$el.querySelector('.vxe-modal--content')
        if (modalContent) {
          modalContent.scrollTop = 0
        }
      })
    },
    handleOpen(blogId) {
      this.blogId = blogId
      this.dialogVisible = true
      this.fetchBlogDetail()
      this.fetchComments()
    },
    //获取当前博客的信息
    fetchBlogDetail() {
      getBlog(this.blogId).then(res => {
        this.blog = res.data

        //增加阅读量
        let form = {
          blogId: this.blogId,
          views: res.data.views + 1
        }
        updateBlog(form)

        //判断当前用户有没有对某个博客点过赞
        selectBlogLikeByUserIdAndBlogId(this.blogId).then(res => {
          this.isLiked = res.data
        })

        selectCollectByUserIdAndBlogId(this.blogId).then(res => {
          this.isCollected = res.data
        })

      })
    },
    //获取当前博客的评论列表
    fetchComments() {
      selectCommentByBlogId(this.blogId).then(res => {
        console.log(res)
        this.comments = res.data
        this.comments.forEach(item => {
          item.avatar = process.env.VUE_APP_BASE_API + item.avatar
        })
      })
    },
    //弹窗关闭后
    handleClosed() {
      this.$emit('update:visible', false)
    },
    //点赞逻辑
    handleLike() {
      this.loading = true
      if (this.isLiked) {
        //取消点赞
        deleteBlogLikeByBlogIdAndUserId(this.blogId).then(res => {
          this.isLiked = false
          this.loading = false
          this.$message.success('已取消点赞')
        })
      } else {
        //点赞
        let form = {
          blogId: this.blogId
        }
        addBloglike(form).then(res => {
          this.isLiked = true
          this.loading = false
          this.$message.success('点赞成功')
        })
      }
    },
    //收藏逻辑
    handleCollect() {
      this.loading = true
      if (this.isCollected) {
        //取消收藏
        deleteCollectByUserIdAndBlogId(this.blogId).then(res => {
          this.isCollected = false
          this.loading = false
          this.$message.success('已取消收藏')
        })
      } else {
        //收藏
        let form = {
          blogId: this.blogId
        }
        addCollect(form).then(res => {
          this.isCollected = true
          this.loading = false
          this.$message.success('收藏成功')
        })
      }
    },
    //发表评论
    subComment() {
      if (!this.content.trim()) {
        this.$message.warning('评论内容不能为空')
        return
      }
      this.loading = true
      let form = {
        content: this.content,
        blogId: this.blogId
      }
      addComment(form).then(res => {
        this.content = ''
        this.loading = false
        this.$message.success('评论发表成功')
        this.fetchComments();
      })
    },
    //回复评论
    handleComment(commentId) {
      this.content = `回复 @${this.comments.find(c => c.commentId === commentId).nickName}`
      this.$nextTick(() => {
        document.querySelector('.el-textarea__inner').focus()
      })
    }
  }

}
</script>

<style scoped>
.blog-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.meta-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}
.blog-summary {
  margin: 15px 0;
  line-height: 1.6;
}
.meta-info span {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.meta-info i {
  margin-right: 5px;
  font-size: 16px;
}

.blog-content {
  line-height: 1.8;
  font-size: 16px;
  color: #333;
  padding-bottom: 20px;
}

.blog-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.actions {
  display: flex;
  justify-content: center;
}

.comment-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.comment-title {
  margin: 0 0 20px;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
}

.comment-title i {
  margin-right: 8px;
  color: #409eff;
}

.comment-list {
  margin-bottom: 30px;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ebeef5;
}

.comment-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  flex-shrink: 0;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-nickName {
  font-weight: bold;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}

.comment-actions {
  font-size: 12px;
  color: #999;
}

.comment-actions span {
  margin-right: 15px;
  cursor: pointer;
  transition: color 0.3s;
}

.comment-actions span:hover {
  color: #409eff;
}

.comment-actions i {
  margin-right: 3px;
}

.comment-form {
  margin-top: 30px;
}

.form-actions {
  margin-top: 10px;
  text-align: right;
}

.liked {
  background-color: #67c23a;
  border-color: #67c23a;
}

.liked:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}
</style>
